import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";

var w = window.innerWidth
var h = window.innerHeight
var scene, camera, renderer

function main() {
  init()
  setLine()
  render()
}

function init() {
  // 创建场景对象Scene
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(75, w / h, 1, 1000)
  camera.position.z = 5

  renderer = new THREE.WebGLRenderer()
  renderer.setClearColor('#8edee2')
  renderer.setSize(w, h)
  document.body.appendChild(renderer.domElement)
}

function setLine() {
  var geometry = new THREE.BufferGeometry(); //创建一个Buffer类型几何体对象
  //类型数组创建顶点数据
  var vertices = new Float32Array([
    100, 0, 100, //顶点1坐标
    -100, 0, -100, //顶点2坐标
  ]);
  // 设置几何体attributes属性的位置属性
  geometry.attributes.position = new THREE.BufferAttribute(vertices, 3); //3个为一组，表示一个顶点的xyz坐标

  var material = new THREE.LineBasicMaterial({ vertexColors: true })

  var line = new THREE.Line(geometry, material)

  scene.add(line)
}

function render() {
  renderer.render(scene, camera)
}

main()
/** --------------------鼠标控件对象--------------------- */
let controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
controls.addEventListener("change", render); //监听鼠标、键盘事件